<template>
  <div>
      <div class="top">
        <h1>聊天</h1>
      </div>
      <main>
          <ul>
            <li v-for="(v,i) in arr" :key="i">
              <div class="left">
                <img :src="v.icon">
                <div class="leftbox">
                <p>
                  <b>{{v.name}}</b>
                  <span>{{v.title}}</span>
                </p>
                <p>{{v.content}}</p>
                </div>
                
              </div>
              <div class="right">
                <i>{{v.date}}</i>
                <b>51</b>
              </div>
            </li>
          </ul>
      </main>
      <Bb></Bb>
  </div>
</template>

<script>
export default {
  data(){
    return{
      arr:[{icon:"/chat/1.png",name:"交易物流通知",title:"官方",content:"商品派送通知",num:51,date:"08:43"},
      {icon:"/chat/1.png",name:"交易物流通知",title:"官方",content:"商品派送通知",num:51,date:"08:43"},
      {icon:"/chat/1.png",name:"交易物流通知",title:"官方",content:"商品派送通知",num:51,date:"08:43"},
      {icon:"/chat/1.png",name:"交易物流通知",title:"官方",content:"商品派送通知",num:51,date:"08:43"},
      {icon:"/chat/1.png",name:"交易物流通知",title:"官方",content:"商品派送通知",num:51,date:"08:43"},
      {icon:"/chat/1.png",name:"交易物流通知",title:"官方",content:"商品派送通知",num:51,date:"08:43"},
      {icon:"/chat/1.png",name:"交易物流通知",title:"官方",content:"商品派送通知",num:51,date:"08:43"},
      {icon:"/chat/1.png",name:"交易物流通知",title:"官方",content:"商品派送通知",num:51,date:"08:43"},
      {icon:"/chat/1.png",name:"交易物流通知",title:"官方",content:"商品派送通知",num:51,date:"08:43"},
      {icon:"/chat/1.png",name:"交易物流通知",title:"官方",content:"商品派送通知",num:51,date:"08:43"},]
    }
  }
}
</script>

<style scoped>
  .top{
    height: 0.6rem;
    width: 100%;
    text-align: center;
    line-height: 0.6rem;
    border-bottom: 0.02rem solid #efefef;
  }
  .top h1{
    font-size: 0.2rem;
    font-weight: 400;
  }
  main{
    flex: 1;
    overflow: scroll;
  }
  li{
    height: 0.9rem;
    display: flex;
    justify-content: space-between;
    padding: 0 0.2rem;
    border-bottom:0.01rem solid #f9f9f9 ;
  }
  .left{
    display: flex;
    align-items: center;
  }
  .left img{
    margin-right:0.12rem;
  }
  .left b{
    font-size: 0.2rem;
    font-weight: 600;
    margin-right:0.07rem;
  }
  .left span{
    border: 0.01rem solid #d24d4c;
    padding:0.03rem;
    border-radius: 0.05rem;
    color:#d24d4c;
    font-weight: bold;
    font-size: 0.13rem;
  }
  .leftbox p:last-child{
    font-size: 0.18rem;
    color:#b5b5b5;
    margin-top:0.06rem;
  }
  .right{
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .right i{
    font-size: 0.16rem;
    font-weight: 400;
    color:#949494;
    margin-bottom:0.05rem
  }
  .right b{
    width:0.4rem;
    height: 0.4rem;
    background-color: #e12f25;
    border-radius: 45%;
    line-height: 0.4rem;
    text-align: center;
    color: white;
  }
</style>